<template>
	<view class="fixedBox">
		<view :class="!boxType?'hide':'show'" @click.stop="boxChange">
			+
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				boxType: false,
				timeOut: null,
				throttle: false
			}
		},
		methods: {
			boxChange() {
				if (this.boxType) {
					if (this.timeOut && !this.throttle) {
						this.throttle = true
						setTimeout(() => {
							this.throttle = false
						},1000)
						this.$emit('change')
					}
				} else {
					this.boxType = true
					if (!this.timeOut) {
						this.timeOut = setTimeout(() => {
							this.boxType = false
							this.timeOut = null
						}, 5000)
					}
				}
			}
		}

	}
</script>

<style lang="scss" scoped>
	.fixedBox {
		$width: 94rpx;
		$fz: 50;

		>view {
			background: #E8322F;
			line-height: $width;
			@include fz($fz, #FFFFFF, false, true);
			@include boxs($width, $width);
			border-radius: $width/2;
			position: fixed;
			bottom: 20%;
			z-index: 999;

		}

		.hide {
			right: -$width*0.4;
			transition: right 1s;
		}

		.show {
			right: 20rpx;
			transition: right 1s;
		}


	}
</style>
